import { Image } from 'antd';
import { formatTime, getFileSize, getFileType, getFileTypeName, makeClassNameList } from "../../../utils";
import { FileItem } from "../../../utils/types";
import { useEffect, useRef, useState } from 'react';


interface Props {
    item: FileItem
    layoutType: 'card' | 'list'
    currentFocusFileItem: FileItem
    onClickItem: Function
    onDoubleClickItem: Function
}

const ShareFileItem = (props: Props) => {
    const {
        item,
        layoutType,
        onClickItem,
        onDoubleClickItem,
        currentFocusFileItem
    } = props;

    const singleClickTimer = useRef(null);
    const clickCount = useRef<number>(0);

    useEffect(() => {
        return () => {
            singleClickTimer.current && clearTimeout(singleClickTimer.current)
        }
    }, []);

    const renderFileIcon = () => {
        if (item.type == 1) {
            return (
                <img className='folder-icon-img' src={require("./../../../assets/image/folder.png")} alt="" />
            )
        } else {
            const fileType = getFileType(item.path);
            // console.log("fileType--->", fileType)
            switch (fileType.toLowerCase()) {
                case '.png':
                case '.jpg':
                case '.jpeg':
                    return (
                        <img
                            className='file-icon-img'
                            src={item && item.url}
                        />
                    )
                    break;
                case '.doc':
                case '.docx':
                    return (
                        <img className='file-icon-img' src={require("./../../../assets/image/word.png")} alt="" />
                    )
                    break;
                case '.xlx':
                case '.xlsx':
                    return (
                        <img className='file-icon-img' src={require("./../../../assets/image/XLS.png")} alt="" />
                    )
                    break;
                case '.ppt':
                case '.pptx':
                    return (
                        <img className='file-icon-img' src={require("./../../../assets/image/PPT.png")} alt="" />
                    )
                    break;
                case '.zip':
                case '.rar':
                    return (
                        <img className='file-icon-img' src={require("./../../../assets/image/zip.png")} alt="" />
                    )
                    break;
                case '.pdf':
                    return (
                        <img className='file-icon-img' src={require("./../../../assets/image/PDF.png")} alt="" />
                    )
                    break;
                default:
                    break;
            }
        }
    }


    const renderFileIconMini = () => {
        if (item.type == 1) {
            return (
                <img className='folder-icon-img-mini' src={require("./../../../assets/image/folder.png")} alt="" />
            )
        } else {
            const fileType = getFileType(item.path);
            // console.log("fileType--->", fileType)
            switch (fileType.toLowerCase()) {
                case '.png':
                case '.jpg':
                case '.jpeg':
                    return (
                        <img
                            className='file-icon-img-mini'
                            src={item && item.url}
                        />
                    )
                    break;
                case '.doc':
                case '.docx':
                    return (
                        <img className='file-icon-img-mini' src={require("./../../../assets/image/word.png")} alt="" />
                    )
                    break;
                case '.xlx':
                case '.xlsx':
                    return (
                        <img className='file-icon-img-mini' src={require("./../../../assets/image/XLS.png")} alt="" />
                    )
                    break;
                case '.ppt':
                case '.pptx':
                    return (
                        <img className='file-icon-img-mini' src={require("./../../../assets/image/PPT.png")} alt="" />
                    )
                    break;
                case '.zip':
                case '.rar':
                    return (
                        <img className='file-icon-img-mini' src={require("./../../../assets/image/zip.png")} alt="" />
                    )
                    break;
                case '.pdf':
                    return (
                        <img className='file-icon-img-mini' src={require("./../../../assets/image/PDF.png")} alt="" />
                    )
                    break;
                default:
                    break;
            }
        }
    }

    const clickHandler = (e) => {
        e.preventDefault();
        clickCount.current++;
        if (singleClickTimer.current !== null) {
            clearTimeout(singleClickTimer.current);
        }
        singleClickTimer.current = setTimeout(() => {
            // console.log("clicks--->", clickCount.current)
            if (clickCount.current === 1 || clickCount.current == 0) {
                // console.log('单击事件');
                onClickItem && onClickItem(item)
            } else if (clickCount.current >= 2) {
                // console.log('双击事件');
                onDoubleClickItem && onDoubleClickItem(item);
            }
            clickCount.current = 0;
        }, 200); // 250 毫秒内没有第二次点击则运行单击事件处理函数
    };

    if (layoutType == 'list') {
        return (
            <div
                onClick={clickHandler}
                className={
                    makeClassNameList([
                        'flex-row folder-item-row',
                        currentFocusFileItem && currentFocusFileItem.id == item.id ? 'active' : ''
                    ])
                }>
                <div className='flex-row'>
                    <div className='folder-item-row-icon-container'>
                        {renderFileIconMini()}
                    </div>
                    <div
                        className='folder-item-row-name'
                        title={item.name}
                    >{item.name}</div>
                </div>
                <div className='folder-item-row-info'>{formatTime(item.createDate)}</div>
                <div className='folder-item-row-info'>{getFileSize(item)}</div>
                <div style={{ width: 112 }} className='folder-item-row-info'>{getFileTypeName(item)}</div>
            </div>
        )
    }
    return (
        <div
            className={
                makeClassNameList([
                    'flex-col folder-item',
                    currentFocusFileItem && currentFocusFileItem.id == item.id ? 'active' : ''
                ])
            }
            onClick={clickHandler}
        >
            <div className='folder-icon-container'>
                {renderFileIcon()}
            </div>
            <div
                className='folder-item-name'
                title={item.name}
            >
                {item.name}
            </div>
        </div>
    )
}


export default ShareFileItem;